<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/hw-admin.css"> 
    <title>控件使用说明</title>
</head>
<body>
    <div class="hw-iframe">
        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    标题组件
                </div>
            </div>
        </div>

        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    标题组件-右侧有操作按钮
                </div>
                <div class="hw-header__item--right">
                    <div class="hw-btn-group">
                        <button class="hw-btn--default">
                            默认按钮
                        </button>
                        <button class="hw-btn--normal">
                            常态按钮
                        </button>
                        <button class="hw-btn--hover">
                            悬浮按钮
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    按钮组件--大按钮(默认按钮)
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
            <div class="hw-btn-group">
                <button class="hw-btn--default">
                    默认按钮
                </button>
                <button class="hw-btn--normal">
                    常态按钮
                </button>
                <button class="hw-btn--hover">
                    悬浮按钮
                </button>
                <button class="hw-btn--clicked">
                    点击按钮
                </button>
                <button disabled='true'  class="hw-btn--normal">
                    禁用按钮
                </button>
                <button disabled='true'  class="hw-btn--default">
                    禁用按钮
                </button>
            </div>
        </div>


        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    按钮组件--中号按钮
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
            <div class="hw-btn-group">
                <button class="hw-btn--default hw-btn--mid">
                    默认按钮
                </button>
                <button class="hw-btn--normal hw-btn--mid">
                    常态按钮
                </button>
                <button class="hw-btn--hover hw-btn--mid">
                    悬浮按钮
                </button>
                <button class="hw-btn--clicked hw-btn--mid">
                    点击按钮
                </button>
                <button disabled='true'  class="hw-btn--normal hw-btn--mid">
                    禁用按钮
                </button>
                <button disabled='true'  class="hw-btn--default hw-btn--mid">
                    禁用按钮
                </button>
            </div>
        </div>


        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    按钮组件--图标按钮
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
            <div class="hw-btn-group">
                <button class="hw-icon-btn">
                    <i class="iconfont">&#xe65f;</i>
                </button>
                <button class="hw-icon-btn">
                    <i class="iconfont">&#xe615;</i>
                </button>
                <button class="hw-icon-btn">
                    <i class="iconfont">&#xe6f4;</i>
                </button>
                <button class="hw-icon-btn">
                    <i class="iconfont">&#xe605;</i>
                </button>
            </div>
        </div>


        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    表单--单选框
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
            <div class="hw-checkbox-group">
                <div class="hw-checkbox">
                    <label for="radio1" class="hw-checkbox__label"> 
                       <input type="radio" name="radio" class="hw-checkbox__input">
                       <i class="iconfont">&#xe62f;</i>
                       <i class="iconfont">&#xe630;</i>  
                       默认状态
                    </label>
                </div>

                <div class="hw-checkbox">
                    <label for="radio1" class="hw-checkbox__label"> 
                       <input type="radio" name="radio" class="hw-checkbox__input">
                       <i class="iconfont">&#xe62f;</i>
                       <i class="iconfont">&#xe630;</i>  
                       默认状态
                    </label>
                </div>

                <div class="hw-checkbox">
                    <label for="radio1" class="hw-checkbox__label"> 
                       <input type="radio" name="radio" class="hw-checkbox__input">
                       <i class="iconfont">&#xe62f;</i>
                       <i class="iconfont">&#xe630;</i>  
                       默认状态
                    </label>
                </div>

            </div>
        </div>


        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    表单--多选框
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
            <div class="hw-checkbox-group">
                <div class="hw-checkbox">
                     <label for="radio1" class="hw-checkbox__label">
                       <input type="checkbox" name="checkbox1" class="hw-checkbox__input">
                       <i class="iconfont">&#xe60f;</i> 
                       <i class="iconfont">&#xe612;</i>
                       默认状态 
                   </label> 
                </div>

                <div class="hw-checkbox">
                     <label for="radio1" class="hw-checkbox__label">
                       <input type="checkbox" name="checkbox1" class="hw-checkbox__input">
                       <i class="iconfont">&#xe60f;</i> 
                       <i class="iconfont">&#xe612;</i>
                       默认状态 
                   </label> 
                </div>

                <div class="hw-checkbox">
                     <label for="radio1" class="hw-checkbox__label">
                       <input type="checkbox" name="checkbox1" class="hw-checkbox__input">
                       <i class="iconfont">&#xe60f;</i> 
                       <i class="iconfont">&#xe612;</i>
                       默认状态 
                   </label> 
                </div>
            </div>
        </div>



        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    筛选栏-输入框
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
           <div class="hw-input-label short">
                <div class="name"><span>*</span>企业全称</div>
                <div class="form-control">
                    <input class="hw-input" type="text" name="enterprise_name" value="" required>
                </div>
            </div>

            <br>

            <div class="hw-input-label">
                <div class="name"><span>*</span>企业全称</div>
                <div class="form-control">
                    <input class="hw-input" type="text" name="enterprise_name" value="" required>
                </div>
            </div>
        </div>


        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    筛选栏-下拉框
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
            <div class="hw-content-wrapper">
              
                <div class="hw-input-label short">
                    <div class="name">企业性质</div>
                    <div class="form-control">
                       <label class="hw-select"> 
                            <div class="select-options">
                                <div class="option selected" data-value="1"><span>国有企业</span><i class="iconfont">&#xe613;</i></div>
                                <div class="option" data-value="2"><span>集体所有制</span><i class="iconfont">&#xe613;</i></div>
                                <div class="option" data-value="3"><span>联营企业</span><i class="iconfont">&#xe613;</i></div>
                                <div class="option" data-value="4"><span>私营</span><i class="iconfont">&#xe613;</i></div>
                                <div class="option" data-value="5"><span>三资</span><i class="iconfont">&#xe613;</i></div>
                                <div class="option" data-value="6"><span>其他企业</span><i class="iconfont">&#xe613;</i></div>
                            </div>
                            <div class="show-option">国有企业</div><i class="iconfont">&#xe619;</i>
                            <input class="hw-input" name="property" type="text" value="" readonly="" unselectable="on">
                        </label>
                    </div>
                </div>
               
                <br>
            
                <div class="hw-input-label">
                    <div class="name">企业性质</div>
                    <div class="form-control">
                       <label class="hw-select"> 
                            <div class="select-options">
                                <div class="option selected" data-value="1"><span>国有企业</span><i class="iconfont">&#xe613;</i></div>
                                <div class="option" data-value="2"><span>集体所有制</span><i class="iconfont">&#xe613;</i></div>
                                <div class="option" data-value="3"><span>联营企业</span><i class="iconfont">&#xe613;</i></div>
                                <div class="option" data-value="4"><span>私营</span><i class="iconfont">&#xe613;</i></div>
                                <div class="option" data-value="5"><span>三资</span><i class="iconfont">&#xe613;</i></div>
                                <div class="option" data-value="6"><span>其他企业</span><i class="iconfont">&#xe613;</i></div>
                            </div>
                            <div class="show-option">国有企业</div><i class="iconfont">&#xe619;</i>
                            <input class="hw-input" name="property" type="text" value="" readonly="" unselectable="on">
                        </label>
                    </div>
                    </div>
              
            </div>
        </div>

        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    筛选栏-日期选择
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper"> 

            <div class="hw-input-label">
                <label class="name" for="">选择日期</label>
                <div class="input-icon-group">
                    <input type="text" onclick="WdatePicker()" placeholder="选择日期">
                    <div class="icon-wrapper">
                        <i class="iconfont">&#xe600;</i>
                    </div>
                </div>
            </div>

            <br>

            <div class="hw-input-label short">
                <label class="name" for="">选择日期</label>
                <div class="input-icon-group">
                    <input type="text" onclick="WdatePicker()" placeholder="选择日期">
                    <div class="icon-wrapper">
                        <i class="iconfont">&#xe600;</i>
                    </div>
                </div>
            </div>

        </div>

        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    数字输入框
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
            <div class="hw-input-cal-wrapper">
                <div class="input-cal-group">
                    <input type="text" placeholder="0" value="0">
                    <div class="cal-wrapper">
                        <div class="cal-item">
                                +
                        </div>
                        <div class="cal-item">
                            -
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    开关
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
            <div class="hw-switch-wrapper">
                <label for="switch1" class="switch__label">
                    <input type="checkbox" name="switch1" id="switch1">
                    <div class="switch__bg">
                        <i class="iconfont">&#xe613;</i>
                        <div class="circle"></div>
                    </div>
                </label>
            </div>
        </div>

        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    滑块
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
        </div>

        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    评分
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
        </div>

        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    步骤条
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
            <div style="width:70%; margin:50px auto">
                <ol class="ui-step ui-step-4">
                    <li class="step-start step-done">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">1</span>
                            <span class="ui-step-cont-text">填写资料</span>
                        </div>
                    </li>
                    <li class="step--default step-done">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">2</span>
                            <span class="ui-step-cont-text">填写信息</span>
                        </div>
                    </li>
                    <li class="step--default ">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">3</span>
                            <span class="ui-step-cont-text">审核</span>
                        </div>
                    </li>
                    <li class="step-end">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">4</span>
                            <span class="ui-step-cont-text">完成注册</span>
                        </div>
                    </li>
                </ol>
                
            </div>
        </div>
        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    步骤条
                </div>
            </div>
        </div>
        <div class="hw-content-wrapper">
            <button class="hw-btn--default" data-target="#imgModal" data-toggle="modal">模态框</button>
            <div class="modal hide" id="imgModal">
                <div class="modal-mask"></div>
                <div class="modal-content">
                    <div class="modal-header">
                        <i class="iconfont" data-dismiss="modal">&#xe63d;</i>
                        <div class="modal-title">提示</div>
                    </div>
                    <div class="modal-body">
                        这是一段信息
                    </div>
                    <div class="modal-footer">
                        <button class="hw-btn--default" data-dismiss="modal">确定</button>
                        <button class="hw-btn--normal" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="../static/lib/jquery-1.12.4.min.js"></script>
    <script src="../static/lib/jquery.form.min.js"></script>
    <script src="../static/lib/My97DatePicker/WdatePicker.js"></script>
    <script src="../static/lib/common/common.js"></script>
    <script src="../static/lib/common/upload.js"></script> 
</body>
</html>